<!--
 * @Description:
 * @Version: 1.0.0
 * @Autor: zhou
 * @Date: 2022-08-17 08:49:41
 * @LastEditors: zhou
 * @LastEditTime: 2022-08-23 18:02:14
-->
<template>
    <div class="left_nav flexrbh">
        <div class="decorate pointer" @click="onToggle"></div>
        <div class="nav_btn flexcs" :class="active_css">
            <div
                class="nav_btn_item flexrcc pointer forbid"
                :class="[cut_nav == item.id ? 'nav_btn_active' : '']"
                v-for="item in nav_list"
                :key="item.id"
                @click="onNav(item.id)"
            >
                {{ item.name }}
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "LeftNav",
    components: {},
    props: {
        nav_list: {
            type: Array,
            default: () => [],
        },
    },
    data() {
        return {
            cut_nav: 0,
            toggle: true,
            active_css: "",
        };
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {},
    methods: {
        onNav(id) {
            this.cut_nav = id;
            this.$emit("onNav", id);
        },
        onToggle() {
            this.toggle = !this.toggle;
            if (this.toggle) {
                this.active_css = "";
            } else {
                this.active_css = "active";
            }
            this.$emit("toggle", this.toggle);
        },
    },
};
</script>
<style lang="scss" scoped>
@keyframes name1 {
    0% {
        // width: vw(120);
        transform: scaleX(1);
        transform-origin: 0 0 0;
        opacity: 0.9;
    }
    25% {
        // width: vw(90);
        transform: scaleX(0.75);
        transform-origin: 0 0 0;
        opacity: 0.8;
    }
    50% {
        // width: vw(60);
        transform: scaleX(0.5);
        transform-origin: 0 0 0;
        opacity: 0.7;
    }
    75% {
        // width: vw(30);
        transform: scaleX(0.25);
        transform-origin: 0 0 0;
        opacity: 0.3;
    }
    100% {
        // width: vw(0);
        transform: scaleX(0);
        transform-origin: 0 0 0;
        opacity: 0;
    }
}

.left_nav {
    position: absolute;
    z-index: 12;
    left: 0;
    top: vh(88);
    bottom: vh(40);
    // width: vw(152);
    color: #ffffff;
    .decorate {
        width: vw(20);
        background: url("~@/assets/images/proview/nav_on.png") no-repeat 0 0;
        background-size: 100% 100%;
        margin-right: vw(12);
        &:hover {
            background: url("~@/assets/images/proview/nav_on1.png") no-repeat 0 0;
            background-size: 100% 100%;
        }
    }
    .nav_btn {
        width: vw(120);
        .nav_btn_item {
            width: 100%;
            height: vh(36);
            background: url("~@/assets/images/proview/nav_left.png") no-repeat 0 0;
            background-size: 100% 100%;
            margin-bottom: vh(12);
        }
        .nav_btn_active {
            background: url("~@/assets/images/proview/nav_left1.png") no-repeat 0
                0;
            background-size: 100% 100%;
        }
        &.active {
            animation-name: name1;
            animation-duration: 0.3s;
            animation-timing-function: linear;
            animation-delay: 0s;
            animation-iteration-count: 1;
            animation-direction: normal;
            animation-fill-mode: both;
        }
    }
}
</style>
